<template>
    <div class="app-container calendar-list-container">
        <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :height="height">
            <div>
                <el-form :model="entity" :rules="dataRule" ref="entity" label-width="80px" size="small">
                    <el-row>
                        <el-col :span="span" v-for="(item,index) in columns" :key="index">
                            <el-form-item :label="item.label" :prop="item.prop" v-if="item.type == 'text'">
                                <el-input v-model="entity[item.prop]" :placeholder="item.placeholder"
                                    :type="item.inputType|'text'" :disabled=" item.disabled| false"
                                    :readonly="item.readonly| false"></el-input>
                            </el-form-item>
                            <el-form-item :label="item.label" :prop="item.prop" v-if="item.type == 'select'">
                                <el-select v-model="entity[item.prop]" :placeholder="item.placeholder"
                                    :disabled="item.disabled| false" :readonly="item.readonly| false">
                                    <el-option v-for="(li,cindex) in selectData[item.prop]" :label="li[item.itemName]"
                                        :value="li[item.itemValue]" :key="cindex"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="item.label" :prop="item.prop" v-if="item.type == 'query'">
                                <gridQuery :entity="entity" :queryEntity="item.queryEntity"
                                    :pagination="item.pagination||false" :url="item.url" :columns="item.columns"
                                    :name="item.propName" :value="item.prop" :rowName="item.rowName"
                                    :rowValue="item.rowValue" :queryList="item.queryList">
                                </gridQuery>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import request from '@/router/axios'
    import gridQuery from '@/components/GridQuery'
    import { Message, MessageBox } from 'element-ui'

    export default {
        components: { gridQuery },
        name: 'formDialog',
        data() {
            return {
                dialogVisible: false,
                entity: {},
                queryEntity: {},
                selectData: {}
            }
        },
        props: {
            span: {
                type: Number,
                default: function () {
                    return 12
                }
            },
            url: {
                type: String,
                default: function () {
                    return null
                }
            },
            title: {
                type: String,
                default: function () {
                    return null
                }
            },
            width: {
                type: String,
                default: function () {
                    return '800px'
                }
            },
            height: {
                type: String,
                default: function () {
                    return '600px'
                }
            },
            dataRule: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            columns: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        created() {
            this.initData()
        },
        computed: {},
        methods: {
            initData() {
                this.columns.forEach(element => {
                    if (element.type == 'select') {
                        this.loadSelect(element)
                    } else if (element.type == 'query') {
                        this.loadSelect(element)
                    }
                });
            },
            loadSelect(row) {
                if (row.dataUrl) {
                    this.doUrl(row.dataUrl).then(data => {
                        if (data) {
                            this.selectData[row.prop] = data
                        }
                    })
                } else {
                    this.selectData[row.prop] = dataList
                }
            },
            setUrl(url) {
                this.url = url
            },
            show(entity) {
                this.dialogVisible = true
                this.entity = entity
            },
            save() {
                this.$refs['entity'].validate((valid) => {
                    if (valid) {
                        this.handleUrl(this.entity).then((data) => {
                            if (data) {
                                this.dialogVisible = false
                                this.$emit('success')
                            }
                        })
                    }
                })
            },
            handleUrl(data) {
                return request({
                    url: this.url,
                    method: 'post',
                    data: data
                })
            },
            doUrl(url, data) {
                return request({
                    url: url,
                    method: 'post',
                    data: data || { key: 'key' }
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>